<template>
  <div class="login-container">
    <van-nav-bar
      class="page-nav-bar"
      title="重置密码"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit" class="login-form" ref="resetform">
      <van-cell-group>
        <van-field
          class="logininput"
          v-model="user.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="rules.mobile"
          label="手机号"
        />
      </van-cell-group>
      <van-cell-group class="codecell">
        <van-field
          class="codeinput"
          v-model="user.code"
          type="code"
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
        <template #button>
        <van-button
          type="primary"
          size="small"
          class="codebtn"
          v-if="codebtn"
          native-type="button"
          @click="sendcode"
          >发送验证码</van-button
        >

        <van-button size="small" class="codebtn" v-else>
          <van-count-down :time="10000" format="ss s" @finish="codebtn = true"
        /></van-button>
        </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          class="logininput"
          v-model="user.password"
          type="password"
          name="password"
           label="新密码"
          placeholder="请输入新密码"
          :rules="rules.password"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" class="subbtn"
          >立即修改</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendSms, reset } from "@/api/user";

export default {
  data() {
    return {
      codebtn: true,
      user: {
        code: 888888,
        mobile: null,
        password: "",
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "手机号不能为空",
          },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        code: [
          {
            required: true,
            message: "验证码不能为空",
          },
          {
            pattern: /^\d{6}$/,
            message: "验证码格式错误",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async onSubmit() {
      const user = this.user;
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "发送中...",
      });
      const { data } = await reset(user);
      console.log(data);
      if (data.errno == 0) {
        this.$toast.success("修改成功");
        this.$router.push("/login");
      } else {
        this.$toast.fail(data.errmsg);
      }
    },
    async sendcode() {
      try {
        await this.$refs.resetform.validate("mobile");
      } catch (err) {
        console.log(err);
        return this.$toast.fail("请输入正确的手机号");
      }
      // 2. 验证通过，显示倒计时
      this.codebtn = false;
      // 3. 请求发送验证码
      const { data } = await sendSms(this.user.mobile);
      if (data.errno == 0) {
        this.$toast.success("发送验证码成功");
      } else {
        this.$toast.fail(data.errmsg);
        this.codebtn = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.login-container{
  background-color: #fff;
  min-height: 100vh;
}

</style>